    <style include="settings-shared">
      :host {
        display: block;
      }

      .zoom-label {
        color: var(--cr-secondary-text-color);
        margin-inline-end: 16px;
      }

      #empty {
        margin-top: 15px;
      }

      .list-item site-favicon {
        flex-shrink: 0;
      }

      .list-item .middle {
        overflow-x: hidden;
        text-overflow: ellipsis;
      }
    </style>
    <div class="list-frame vertical-list" id="listContainer">
      <iron-list id="list" preserve-focus items="[[sites_]]"
          class="cr-separators" risk-selection>
        <template>
          <div class="list-item" first$="[[!index]]">
            <site-favicon url="[[item.originForFavicon]]"></site-favicon>
            <div class="middle">
              <span class="url-directionality">[[item.displayName]]</span>
            </div>
            <div class="zoom-label">[[item.zoom]]</div>
            <cr-icon-button class="icon-clear" on-click="removeZoomLevel_"
                title="$i18n{siteSettingsRemoveZoomLevel}"
                tabindex$="[[tabIndex]]"></cr-icon-button>
          </div>
        </template>
      </iron-list>
      <div id="empty" hidden$="[[!showNoSites_]]">
        $i18n{siteSettingsNoZoomedSites}
      </div>
    </div>
